<template>
  <div>
    <template>
      {{ form }}
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="维修单名称">
          <el-input
            v-model="formInline.RName"
            placeholder="维修单名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input
            v-model="formInline.EName"
            placeholder="设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formInline.Rremark" placeholder="备注"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getRepairOrders()">查询</el-button>
          <el-button type="primary" @click="upd">编辑</el-button>
          <el-button type="danger" @click="OpenPerDia" plain
            >添加菜单</el-button
          >
          <el-dialog :visible.sync="dialogFormVisiblePerAdd">
            <RepairAddView @ClosePerAdd="ClosePerAdd"></RepairAddView>
          </el-dialog>
          <el-dialog
            v-if="dialogFormVisiblePerUpd"
            :visible.sync="dialogFormVisiblePerUpd"
          >
            <RepairUpdView
              :PerId="PerId"
              @ClosePerUpd="ClosePerUpd"
            ></RepairUpdView>
          </el-dialog>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="Rid" label="维修单Id"> </el-table-column>
        <el-table-column prop="RName" label="维修单名称"> </el-table-column>
        <el-table-column prop="Rnum" label="维修单编号"> </el-table-column>
        <el-table-column prop="AddTime" label="添加时间"> </el-table-column>
        <el-table-column prop="Rremark" label="备注"> </el-table-column>
        <el-table-column prop="EName" label="设备名称"> </el-table-column>
        <el-table-column prop="Enum" label="设备编号"> </el-table-column>
        <el-table-column prop="EType" label="设备类型"> </el-table-column>
        <el-table-column prop="Ecare" label="维修车间"> </el-table-column>
        <el-table-column prop="BName" label="品牌名称"> </el-table-column>
        <el-table-column prop="CreatorId" label="创建人"> </el-table-column>
        <el-table-column prop="CreateDate" label="创建时间"> </el-table-column>
        <el-table-column prop="Updator" label="修改人"> </el-table-column>
        <el-table-column prop="UpdateDate" label="修改时间"> </el-table-column>
      </el-table>
    </template>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="70%">
      <span>
        <el-form ref="form" :model="form" label-width="70px">
          <el-form-item label="维修单名称" prop="RName">
            <el-input
              v-model="form.RName"
              placeholder="选择维修单名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="维修单编号" prop="Rnum">
            <el-input
              v-model="form.Rnum"
              placeholder="选择维修单编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="EName">
            <el-input
              v-model="form.EName"
              placeholder="选择设备名称"
              disabled
            ></el-input>
            <el-button type="text" @click="(dialogTableVisible = true), upd()"
              >高级选择</el-button
            >
          </el-form-item>
          <el-form-item label="设备编号" prop="Enum">
            <el-input
              v-model="form.Enum"
              placeholder="选择设备编号"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="品牌" prop="BName">
            <el-select v-model="form.BName" placeholder="请选择品牌">
              <el-option
                disabled
                v-for="item in PinPai"
                :key="item.Bid"
                :label="item.BName"
                :value="item.Bid"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="保修日期" prop="AddTime">
            <el-input
              type="date"
              placeholder="选择保修日期"
              v-model="form.AddTime"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="Rremark">
            <el-input type="textarea" v-model="form.Rremark"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="update">修改</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import RepairAddView from "../../components/RepairComponet/RepairAddComp.vue";
import RepairUpdView from "../../components/RepairComponet/RepairUpdComp.vue";
export default {
  components: {
    RepairAddView,
    RepairUpdView,
  },
  data() {
    return {
      tableData: [],
      formInline: {
        RName: "",
        EName: "",
        Rremark: "",
      },
      PinPai: [],
      form: {},
      multipleSelection: [],
      dialogFormVisiblePerAdd: false,
      dialogFormVisiblePerUpd: false,
      dialogVisible: false,
    };
  },
  methods: {
    getRepairOrders() {
      this.axios
        .get("http://localhost:5255/api/RepairOrders/GetRepairOrders", {
          params: {
            RName: this.formInline.RName,
            EName: this.formInline.EName,
            Rremark: this.formInline.Rremark,
          },
        })
        .then((res) => {
          this.tableData = res.data.Data;
        });
    },
    OpenPerDia() {
      this.dialogFormVisiblePerAdd = true;
    },
    ClosePerAdd() {
      this.dialogFormVisiblePerAdd = false;
      this.getRepairOrders();
    },
    ClosePerUpd() {
      this.dialogFormVisiblePerUpd = false;
      this.getRepairOrders();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //编辑
    upd() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择要编辑的数据",
          type: "warning",
        });
        return;
      }
      if (!(this.multipleSelection.length == 1)) {
        this.$message({
          message: "只能选择一行编辑的数据",
          type: "warning",
        });
        return;
      }
      let ps = [];
      this.multipleSelection.forEach((e) => {
        ps.push(e.Rid);
      });
      this.axios
        .get(
          "http://localhost:5255/api/RepairOrders/GetRepairOrdersById?Rid=" + ps
        )
        .then((res) => {
          this.form = res.data.Data;
          this.form.AddTime = this.form.AddTime.split("T")[0];

          this.dialogVisible = true;
        });
    },
    //修改
    update() {
      this.axios
        .put(
          "http://localhost:5255/api/RepairOrders/UpdateRepairOrders",
          this.form
        )
        .then((res) => {
          if (res.data == 1) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.show();
            this.dialogVisible = false;
          } else {
            this.$message({
              message: "修改失败",
              type: "error",
            });
          }
        });
    },
    Pinpaing() {
      this.axios
        .get("http://localhost:5255/api/RepairOrders/GetBrandsList")
        .then((res) => {
          this.PinPai = res.data.Data;
        });
    },
  },
  created() {
    this.getRepairOrders();
    this.Pinpaing();
  },
};
</script>

<style>
</style>